<template>
  <div class="container">
  <!-- <h1>团课预约设置</h1> -->
    <el-form :label-width="120"  class="form-res" >
       <el-form-item label="预约开始时间">
        <el-radio-group v-model="form.appointmentStartMode">
          <el-radio value="0">
              <span>不会限制会员可预约的天数!</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item >
        <el-radio-group v-model="form.appointmentStartMode">
          <el-radio value="1">
              <span>最多可以提前</span>
              <el-input v-model="form.startDay" size="small"/>
              <span>天内的课程</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 截止时间 -->
       <el-form-item label="预约截止时间">
        <el-radio-group v-model="form.appointmentDeadlineMode">
          <el-radio value="0">
              <span>任意时间,均可预约</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item >
        <el-radio-group v-model="form.appointmentDeadlineMode">
          <el-radio value="1">
              <span>预约截止时间:上课前</span>
              <el-input v-model="form.endHour" size="small"/>
              <span>小时</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item >
        <el-radio-group v-model="form.appointmentDeadlineMode">
          <el-radio value="1">
              <span>预约截止时间:上课前</span>
              <el-input v-model="form.endDay" size="small"/>
              <span>天的</span>
              <el-time-picker v-model="form.endTimeStr" size="small" style="width: 100px;"/>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 取消预约时间 -->
       <el-form-item label="取消预约时间">
        <el-radio-group v-model="form.appointmentCancelMode">
          <el-radio value="0">
              <span>在上课前任意时间，均可取消预约</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item >
        <el-radio-group v-model="form.appointmentCancelMode">
          <el-radio value="1">
              <span>取消预约截止时间:上课前</span>
              <el-input v-model="form.cancelHour" size="small"/>
              <span>小时</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item >
        <el-radio-group v-model="form.appointmentCancelMode">
          <el-radio value="1">
              <span>取消预约截止时间:上课前</span>
              <el-input v-model="form.cancelDay" size="small"/>
              <span>天的</span>
              <el-time-picker v-model="form.cancelTimeStr" size="small" style="width: 100px;" />
          </el-radio>
        </el-radio-group>
      </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
          </el-form-item>
    </el-form>  
   


  </div>
</template>

<script setup>
import {ref,reactive} from  'vue'
const  form = reactive({
  appointmentStartMode:'0', //预约开始模式
  startDay:'1',//提前多天预约
  appointmentDeadlineMode:'0',//截止
  endHour:'2',//截止时间
  endDay:'1',//截止day
  endTimeStr:'',
  appointmentCancelMode:'0',//取消模式
  cancelHour:'2',
  cancelDay:'1',
  cancelTimeStr:''

})

const value1 = ref(new Date(2024, 9, 10, 18, 30))
const save=()=>{
  console.log('--save 保存预约信息-')
   ElMessageBox.confirm(
      // `<h3>你确定要修改全局设置吗?</h3> <h5 style="color:#797979;">注意:此设置将影响所有课程预约</h5>`,
      `<h3>你确定要修改全局设置吗?</h3> <h5 style="color:#797979;">注意:此设置将影响所有课程预约</h5>`,
      '提示',
      {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
           dangerouslyUseHTMLString: true,
           center:true
      }
  )
      .then(() => {
          //todo调用后端接口 修改全局设置

          ElMessage({
              type: 'success',
              message: '预约设置成功',
          })
      })
      .catch(() => {
          ElMessage({
              type: 'info',
              message: '取消预约设置',
          })
      })
}
</script >
<style lang="less" scoped>
.form-res{
  width: 80%;
  margin: 0 20%;
}
.form-res .el-input{
  width: 80px;
}

</style>